<template>
  <el-drawer title="添加轮播图" direction="rtl" size="50%" v-on:close="Load()">
    <el-form :model="form" label-width="120px">
      <el-form-item label="轮播图图片">

        <el-upload action="#" :auto-upload="false" :http-request="false" list-type="picture-card"
          :on-change="handlePictureCardPreview" :on-preview="handlePreview" :on-remove="handleRemove" limit="1">
        </el-upload>
        <el-dialog v-model="dialogVisible">
          <img w-full style="height: 50vh;" :src="UploadSrc" alt="Preview Image" />
        </el-dialog>

      </el-form-item>
    </el-form>
    <el-button type="success" v-on:click="Add()">添加</el-button>
  </el-drawer>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Load, getBase64, Upload, CloseUpload } from '/src/style.js'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { AddBanner } from '../../../service/Banner.js'
import {ReadImageSrc} from  '/src/config.js'

console.log(ReadImageSrc)
const dialogVisible = ref(false)
//*文件上传
const UploadFile = ref()
const UploadName = ref()
const CloseUploadName = ref()
const UploadSrc = ref('')

const form = ref()

const AddBannerList = ref()

//*图片上传成功获取图片路径
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile, fileList) => {
  AddBannerList.value = uploadFile.name
  getBase64(uploadFile.raw).then(res => {
    const params = res.split(',') //*分割类型和base64内容
    UploadFile.value = params[1]
    UploadName.value = uploadFile.name
    const data = { name: uploadFile.name, size: uploadFile.size, file: params[1],type:uploadFile.raw.type }
    Upload(data).then((res)=>{
    UploadSrc.value = ReadImageSrc + UploadName.value
    })

  })
}
//*文件移除时
const handleRemove = (uploadFile) => {
  CloseUploadName.value = uploadFile.name
  const data = { name: CloseUploadName.value,type:uploadFile.raw.type }
  CloseUpload(data)
}
//*预览图片
const handlePreview = () => {

  dialogVisible.value = true
}

const Add = () => {
  const data = { Banner_src: AddBannerList.value }
  AddBanner(data)
}
</script>
  
  
<style></style>